<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<body>
<!-- 使用全局过滤器 -->
<div id="app">
  <p>{{ msg | UpperCase }}</p>
</div>

<!-- 使用局部过滤器 -->
<div id="app1">
  <p>{{ msg | UpperCase }}</p>
</div>

<!-- 过滤器传参和串行 -->
<div id="app2">
  <p>{{ msg | filter1('元') | filter2 }}</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  <!-- 定义全局过滤器 -->
  Vue.filter("UpperCase",function (value){
     return value.charAt(0).toUpperCase()+value.slice(1);
  })

  let vm = new Vue({
     el: "#app",
     data:{
       msg: "blake"
     }
  })

  let vm1 = new Vue({
    el: "#app1",
    data:{
      msg: "blake"
    },
    filters: {
      UpperCase: function (value){
        return value.charAt(0).toUpperCase()+value.slice(1);
      }
    }
  })

  let vm2 = new Vue({
    el: "#app2",
    data:{
      msg: 100
    },
    filters: {
      filter1: function (value,param){
        return value+param;
      },
      filter2: function (value){
        return value+"人民币"
      }
    }
  })
</script>


</body>
</html>